<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title>视频播放</title>
		<link rel="stylesheet" type="text/css" href="css/header.css" />
		<!--<link rel="stylesheet" type="text/css" href="css/video-js.min.css"/>-->
		<link href="http://vjs.zencdn.net/5.8.8/video-js.css" rel="stylesheet">
		<style>
			.video_content {
				width: 1226px;
				margin: 0 auto;
				position: relative;
				overflow: hidden;
				height: 100%;
			}
			
			.video_content>h5 img {
				vertical-align: sub;
				margin-right: 5px;
			}
			
			.video_content>h5 {
				font-size: 18px;
				font-weight: normal;
				line-height: 36px;
				background-color: white;
			}
			
			.video_play {
				width: 820px;
				/*float: left;*/
			}
			
			.video_play video {
				width: 100%;
				float: left;
			}
			
			.my-video-dimensions {
				width: 100%;
			}
			
			.video_play p {
				text-align: right;
				padding-right: 20px;
				background-color: #5c5c5c;
				font-size: 14px;
				line-height: 28px;
				color: #ccc;
			}
			.video_play p img{
				vertical-align: sub;
				padding-right: 10px;
				cursor: pointer;
			}
			
			.video_list {
				width: 406px;
				/*height: 600px;*/
				height: 100%;
				/*float: left;*/
				background-color: #4d4d4d;
				position: absolute;
				top: 36px;
				right: 0;
				overflow-y: auto;
				/*overflow-y:visible;*/
			}
			.video_list>h5{
				background-color: #3d3d3d;
				font-size: 18px;
				font-weight: normal;
				color: #cccccc;
				line-height: 36px;
				padding-left: 5%;
			}
			.video_list ul {
				width: 90%;
				margin: 0 auto;
				/*background-color: #4d4d4d;*/
			}
			.video_list ul li{
				color: #cccccc;
				border-bottom: 1px solid #666666;
				position: relative;
				margin: 15px 0;
			}
			.lesson_class1 li>div{
				width: 40%;
				margin-bottom: 15px;
				position: relative;
			}
			.lesson_class1 li>div img:first-child{
				width: 100%;
			}
			.lesson_class1 li>div p{
				width: 100%;
				position: absolute;
				bottom: 0;
				text-align: center;
				background-color: rgba(0,0,0,0.5);
				color: #96d610;
				font-size: 12px;
				line-height: 28px;
			}
			.lesson_class1 li>div img:last-child{
				position: absolute;
				top: 0;
				left: 0;
			}
			.lesson_class1 li>p{
				position: absolute;
				top: 0;
				left: 45%;
			}
			.video_msg {
				width: 1226px;
				margin: 0 auto;
			}
			.video_msg>p{
				width: 820px;
				border-bottom: 1px solid gainsboro;
				padding: 60px 0 35px;
			}
			.video_msg>p span{
				background-color: #96d610;
				color: white;
				padding: 10px 30px;
				border-radius: 5px;
				font-size: 18px;
				cursor: pointer;
			}
			.video_brief h5 {
				margin: 30px 0 20px;
				border-left: 3px solid #96d610;
				padding-left: 20px;
				font-size: 18px;
				font-weight: normal;
			}
			.video_brief p{
				width: 800px;
				margin-left: 20px;
				line-height: 32px;
				padding-bottom: 30px;
			}
			
			/*视频播放按钮*/
			.video-js .vjs-big-play-button:before{
				background-color: #96d610;
				width: 80px;
				height: 80px;
				border-radius: 50%;
				line-height: 1.5em;
			}
			.video-js .vjs-big-play-button{
				background-color: red;
				position: absolute;
				width: 80px;
				height: 80px;
				border-radius: 50%;
				top: 50%;
				margin-top: -40px;
				left: 50%;
				margin-left: -40px;
				border: 0px;
				font-size: 5em;
			}
		</style>
	</head>

	<body>
		<div class="video_content">
			<h5><img height="20px" src="img/vip.png"/>宝宝爬行训练方法</h5>
			<div class="video_play">
				<video id="my-video" class="video-js" controls preload="auto" poster="img/poster1.png" data-setup="{}">
					<source src="img/mv.mp4" type='video/mp4'>
					<!--<source src="MY_VIDEO.webm" type='video/webm'>-->
					<p class="vjs-no-js">
						To view this video please enable JavaScript, and consider upgrading to a web browser that
						<a href="http://videojs.com/html5-video-support/" target="_blank">supports HTML5 video</a>
					</p>
				</video>
				<p><img src="img/zan_black.png" />10次</p>
			</div>
			<div class="video_list">
				<h5>治疗师相关课程</h5>
				<ul class="lesson_class1">
					<li>
						<div>
							<img src="img/poster2.png" alt="" />
							<p>正在播放</p>
							<img width="30px" src="img/vip.png" alt="" />
						</div>
						<p>宝宝站立训练方法</p>
					</li>
					<li>
						<div>
							<img src="img/poster2.png" alt="" />
							<p>正在播放</p>
							<img width="30px" src="img/vip.png" alt="" />
						</div>
						<p>宝宝站立训练方法</p>
					</li>
					
				</ul>
				<h5>治疗师相关课程</h5>
				<ul class="lesson_class1">
					<li>
						<div>
							<img src="img/poster2.png" alt="" />
							<p>正在播放</p>
							<img width="30px" src="img/vip.png" alt="" />
						</div>
						<p>宝宝站立训练方法</p>
					</li>
					<li>
						<div>
							<img src="img/poster2.png" alt="" />
							<p>正在播放</p>
							<img width="30px" src="img/vip.png" alt="" />
						</div>
						<p>宝宝站立训练方法</p>
					</li>
					<li>
						<div>
							<img src="img/poster2.png" alt="" />
							<p>正在播放</p>
							<img width="30px" src="img/vip.png" alt="" />
						</div>
						<p>宝宝站立训练方法</p>
					</li>
				</ul>
			</div>

		</div>
		<div class="video_msg">
			<p class="order">
				<span>预约专家</span>
			</p>
			<div class="video_brief">
				<h5>视频简介</h5>
				<p>——小步骤阶梯化训练方案——<br />
“会背唐诗会数数，仍然不会爬”早期教育中普遍存在着“重智能轻体能”的误区，<br />
一些家庭由于不重视孩子的爬行空间的提供及爬行机会的创造，使得少量孩子没有经历爬行期，或爬行能力发展不彻底就开始进入学习行走的阶段，结果对孩子的运动整合能力等产生不良的影响。而这种影响可能一直持续到一个人的一生。<br />
实际上爬行是人类进化史上一件极重要的事。人类个体早期的爬行是婴儿探索周围小小世界，发展智慧一个不可或缺的手段。爬行是从睡卧位到直立行走的中间过渡，是一个转折型的运动模式，在婴儿发展中起着一个非常重要承上启下的作用，对于身体的重心调整、四肢协调、平衡控制和深度知觉起着不可小视的作用。<br />
爬行能力发展分为爬行反射、爬行前期、爬行尝试、协调爬行、快速爬行、爬高上低、攀爬、爬行游戏这些阶段。<br />
今天我们分阶段给家长提供一些训练方案，希望家长能够重视爬行，为孩子提供爬行空间和机会。</p>
				<h5>使用人群</h5>
				<h5>病症</h5>
				<h5>讲师介绍</h5>
			</div>
		</div>
		
	</body>
	<script src="js/jquery-1.8.3.min.js" type="text/javascript" charset="utf-8"></script>
	<script src="http://vjs.zencdn.net/5.8.8/video.js"></script>
	<script type="text/javascript">
	</script>

</html>